<template>
	<div>
		<!-- <h2>菜品管理</h2> -->
		<el-table class="yangshi" ref="singleTable" v-loading="loading" :data="tableData" stripe style="margin-top: 15px"
			@selection-change="selsChange">
			<!--		<el-table :data="list" style="width: 100%">-->
			<el-table-column type="selection" width="55">
			</el-table-column>
			<!--			<el-table-column type="selection"/>-->
			<el-table-column label="订单号" prop="orderNo" width="150" />
			<el-table-column prop="dishes.dishesName" label="菜品名称" width="100" />
			<el-table-column prop="shop.shopName" label="店铺名称" width="120" />
			<el-table-column prop="user.phoneNumber" label="顾客电话" width="130" />
			<el-table-column prop="orderTime" label="下单时间" width="180" />
			<el-table-column prop="user.address" label="顾客收货地址" width="130" />
			<el-table-column prop="orderPrice" label="价格" width="100" />
			<el-table-column label="菜品图片" width="160">
				<template #default="scope">
					<el-image style="width: 100px; height: 100px" :src="scope.row.dishes.dishesPhotoOrVideoUrl">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column align="right">
				<template #header>
					<el-input v-model="search" @blur="sou()" size="small" placeholder="搜索分类" />
				</template>
				<!--				<template #default="scope">-->
				<!--&lt;!&ndash;          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">添加订单</el-button>&ndash;&gt;-->
				<!--					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>-->
				<!--&lt;!&ndash;					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>&ndash;&gt;-->
				<!--          <el-button size="small" type="danger" @click="deleteFileOrDirectory(sels)" :disabled="this.sels.length === 0">删除</el-button>-->
				<!--				</template>-->
				<el-button size="small" type="danger" @click="deleteFileOrDirectory(sels)"
					:disabled="this.sels.length === 0">删除</el-button>
			</el-table-column>
		</el-table>
		<div>
			<br />
			<!-- 分页 -->
			<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :small="small"
				:disabled="disabled" background layout="prev, pager, next, jumper" :total="1000"
				@size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	// import storage from '/src/utils/localstorage.js'
	export default {
		name: "OrdersList",
		data() {
			return {
				search: '',
				tableData: [],
				sels: [], //选中的值显示
				currentPage: 0,
				pageSize: 5,
				total: 0
			}
		},
		mounted() { //挂载之后执行的方法
			this.getList();
		},
		methods: {
			getList() {

				this.$axios.get('/orders/orderListByPage', {
						params: {
							pageNum: this.currentPage,
							size: this.pageSize,
							shopName:this.search
						}
					})
					.then(res => {
						this.tableData = res.ordersPage.records;
						this.total = res.total;
						this.currentPage = res.current;
						this.pageSize = res.size;

					}).catch(error => {
						console.log("error:" + error)
					})
			},
			handleCurrentChange() {
				this.$axios.get('/orders/orderListByPage', {
						params: {
							pageNum: this.currentPage,
							size: this.pageSize,
							shopName:this.search
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.tableData = res.ordersPage.records;
						this.total = res.total;
						// this.currentPage = res.current;
						this.pageSize = res.size;
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			selsChange(sels) {
				this.sels = sels
			},
			deleteFileOrDirectory() {
				var ids1 = this.sels.map(item => item.id).join() //获取所有选中行的id组成的字符串，以逗号分隔

				this.$axios.get('/orders/remove', {

					params: {
						"ids": ids1
					}
				})
				this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						message: "删除成功",
						type: 'success'
					})
					window.location.reload();
				})
			},
			sou() {
				this.tableData="";
				this.$axios.get('/orders/orderListByPage', {
						params: {
							pageNum: this.currentPage,
							size: this.pageSize,
							shopName:this.search
						}
					})
					.then(res => {
					this.tableData = res.ordersPage.records;
					this.total = res.total;
					this.currentPage = res.current;
					this.pageSize = res.size;
					}).catch(error => {
						console.log("error:" + error)
					})

			}
		}
	}
</script>

<style scoped>
	/* ul>li {
		float: left;
		list-style: none;
	}

	.image {
		display: inline-block;
		width: 200px;
	}

	.blind-box-container {
		border: silver solid 2px;
		border-radius: 5px;
		width: 800px;
		height: 440px;
	}

	.title {
		display: inline-block;
	}

	.demo-image {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}

	.oneGrid-b {
		margin-right: 68px;

	} */

	/* #threeGrid {
		margin-left: 68px;
	} */
</style>
